<template>
  <el-dialog :title="getTitle" :close-on-click-modal="false" :visible.sync="visible" @close="clearDataList()" width="90vw" top="3vh">
    <el-container>
      <el-main style="height:70vh">
        <el-tabs type="card" v-model="activeTab" class="tabBox"  @tab-click="handleTabClick(activeTab)">
          <el-tab-pane label="基本情况" name="first">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="24" :md="5">
                <div class="user__tree boxsty cpTable"  v-for="(item, index) in hzTitle" :key="index">
                  <div class="cePingPiao">总数</div>
                  <div class="font16">总票数：{{ item.zps }}</div>
                  <div class="font16">
                    评票率：{{item.ppl == null ? "" : getPercentage(item.ppl)}}
                  </div>
                  <div class="cePingPiao">实名</div>
                  <div class="font16">合计：{{item.smps}}</div>
                  <div class="font16">已提交：{{item.smytj}}</div>
                  <div class="red font16">未提交：{{item.smwtj}}</div>

                  <div class="cePingPiao">匿名</div>
                  <div class="font16">合计：{{item.nmps}}</div>
                  <div class="font16">已提交：{{item.nmytj}}</div>
                  <div class="red font16">未提交：{{item.nmwtj}}</div>


              <!-- <el-table :data="hzTitle" border style="width: 100%" >
                <el-table-column label="总数"  align='center'>
                  <el-table-column prop="zps" label="总票数"></el-table-column>
                  <el-table-column prop="ppl" label="评票率" :formatter="nFormatterShow"></el-table-column>
                </el-table-column>
                <el-table-column label="实名" align='center'>
                  <el-table-column prop="smps" label="合计"></el-table-column>
                  <el-table-column prop="smytj" label="已提交"></el-table-column>
                  <el-table-column prop="smwtj" label="未提交"></el-table-column>
                </el-table-column>
                <el-table-column label="匿名" align='center'>
                  <el-table-column prop="nmps" label="合计"></el-table-column>
                  <el-table-column prop="nmytj" label="已提交"></el-table-column>
                  <el-table-column prop="nmwtj" label="未提交"></el-table-column>
                </el-table-column>
              </el-table> -->
            </div>
              </el-col>
            <el-col :xs="24" :sm="24" :md="19">
            <div class="user__main boxsty">
            <div class="tabletext titbottom">被测评情况</div>
            <div class="cpTable" height="70vh" v-if="bcppList.length>0">
              <el-table :data="bcppList" border stripe height="calc(75vh - 270px)" class="font16">
                <el-table-column prop="" label="序号" :formatter="nShowIndex" min-width="80px"></el-table-column>
                <el-table-column prop="bcprname" label="对象" min-width="150px"></el-table-column>
                <el-table-column label="总数"  align='center'>
                  <el-table-column prop="zps" label="总票数"></el-table-column>
                  <el-table-column prop="ppl" label="评票率" :formatter="nFormatterShow" min-width="100px"></el-table-column>
                </el-table-column>
                <el-table-column label="实名" align='center'>
                  <el-table-column prop="smps" label="合计"></el-table-column>
                  <el-table-column prop="smytj" label="已提交"></el-table-column>
                  <el-table-column prop="smwtj" label="未提交"></el-table-column>
                </el-table-column>
                <el-table-column label="匿名" align='center'>
                  <el-table-column prop="nmps" label="合计"></el-table-column>
                  <el-table-column prop="nmytj" label="已提交"></el-table-column>
                  <el-table-column prop="nmwtj" label="未提交"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
            </div>
            </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="选票列表" name="second">
            <div class="avue-crud">
              <el-table :data="xpList" style="width: 100%;" stripe height="calc(75vh - 200px)">
                <el-table-column prop="" label="序号" :formatter="nShowIndex" width="80"></el-table-column>
                <el-table-column prop="xpCode" label="主票号" width="140"></el-table-column>
                <el-table-column prop="bcpDx" label="被评对象" width="100"></el-table-column>
                <el-table-column prop="bcpDeptName" label="被评部门"></el-table-column>
                <el-table-column prop="bcpUserName" label="被评人员" width="150"></el-table-column>
                <el-table-column prop="isSm" label="是否实名" width="100"></el-table-column>
                <el-table-column prop="cpDeptName" label="测评部门"></el-table-column>
                <el-table-column prop="cpUserName" label="测评人员" width="150"></el-table-column>
                <el-table-column prop="dfZt" label="测评状态" width="100">
                  <template slot-scope="scope">
                    <span :class="Zt(scope.row.dfZt)">{{scope.row.dfZt}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="dfKssj" label="开始测评时间" :formatter="nShowDate" width="150"></el-table-column>
                <el-table-column prop="dfJssj" label="完成测评时间" :formatter="nShowDate" width="150"></el-table-column>
              </el-table>
                        <div style="margin-top:20px">
                          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="page.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize" :total="page.total" background layout="total, sizes, prev, pager, next">
                           </el-pagination>
                        </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" plain @click="clearDataList">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getHdhzApi,getCpphzApi,getHdhzPage } from '@/api/ceping/cepinghdglxpxxb'
//基本情况 被测评情况 选票列表

export default {
  data(){
    return{
      hdName:'',
      hdId:'',
      cppId:'',
      cppName:'',
      activeTab:'',
      visible: false,
      bcppList:[],
      xpList:[],
      hzTitle:[],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条,
        isAsc: false// 是否倒序
      }

    }
  },
  computed:{
    getTitle(){
      let lTitle = '';
      if(this.cppName === ''){
        lTitle = this.hdName;
      }else{
        lTitle = this.hdName + ' - ' + this.cppName;
      }
      return lTitle;
    }
  }
  ,
  methods:{
    //取得百分比
    getPercentage(va){
      return  Number(va * 100).toFixed(2) + '%';
    },
    //列显示重新定义
    nFormatterShow(row, column, cellValue, index){
      if (cellValue){
        return this.getPercentage(cellValue);
      }else {
        return "";
      }

    },
    //日期重新显示
    nShowDate(row, column, cellValue, index){
      if(cellValue){
        return this.$moment(cellValue).format("YYYY-MM-DD");
      }else {
        return cellValue;
      }
    },
    nShowIndex(row, column, cellValue, index){
      return index + 1;
    }
    ,
    // 初始化清零
    setInitPhz(){
      this.hdName = '';
      this.hdId = '';
      this.cppId = '';
      this.cppName = '';
      this.bcppList=[];
      this.xpList =[] ;
      this.hzTitle = [];
      this.activeTab ="first"
    },

    // 初始化
    init(PidDate,ChildDate){
      this.visible = true;
      this.setInitPhz();

      this.hdId = PidDate.id;
      this.hdName = PidDate.hdName;

      if(ChildDate){
        this.cppId = ChildDate.cppId ;
        this.cppName = ChildDate.cppName;
      }

      this.getDataList();
    },
    // 关闭清空变量
    clearDataList(){
      this.visible = false;
      this.setInitPhz();
    },
    // 取得数据
    getDataList(){
      let dateMap;
      if(this.cppName === '') { //会议票
        getHdhzApi(this.hdId).then(res => {
          dateMap = res.data.data;
          this.bcppList = dateMap["bcpplist"];
         // this.xpList = dateMap["cepingHdglXpxxbList"];
          this.hzTitle.push(dateMap["cpphz"]);
          ////console.log(dateMap);
          ////console.log(this.bcppList);
          ////console.log(this.xpList);
          ////console.log(this.hzTitle);
        })
      }else { //测评票
        getCpphzApi(this.hdId,this.cppId).then(res => {
          dateMap = res.data.data;
          //console.log('进入测评票')
          this.bcppList = dateMap["bcpplist"];
         // this.xpList = dateMap["cepingHdglXpxxbList"];
          this.hzTitle.push(dateMap["cpphz"]);
        })
      }
    },
    //获取带分页的被测评票
    getDataList2(page){
      let dateMap;
      var param={
        hdId:this.hdId,
          cppId:this.cppId,
        current: page.currentPage,
        size: page.pageSize
      }
      getHdhzPage(param).then(res => {
        dateMap = res.data.data;
        this.xpList = dateMap.records;
        this.page.total=dateMap.total;
      }).catch(()=>{

      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.page.pageSize=val;
      this.page.currentPage = 1;
      this.getDataList2(this.page)
    },
    // 当前页
    currentChangeHandle(val) {
      this.page.currentPage = val;
      this.getDataList2(this.page)
    },
//切换tab
    handleTabClick(val){
      console.log(val)
      if(val=='second'){
        this.getDataList2(this.page)
      }
    },
    //状态
    Zt(value) {
      return {
        red: value === "未开始",
        green: value === "已提交",
        blue: value === "进行中"
        // blue: value === "002",
        // green: value === "003",
      };
      // if (value) {
      //   return 'green';
      // } else {
      //   return 'red'
      // }

    }
  }

}
</script>

<style scoped>

</style>
